<template>
	<view>
		<view class="swiper-box" id="swiper">
			<swiper circular="true" autoplay="true" @change="swiperChange">
				<swiper-item v-for="(swiper, index) in shop.images" :key="index">
					<image :src="$wanlshop.oss(swiper)" mode="aspectFill" />
				</swiper-item>
			</swiper>
			<view class="indicator">{{ currentSwiper + 1 }}/{{shop.images.length}}</view>
		</view>
		<view class="topinfo">
			<view class="left">
				<view class="title">{{shop.name}}</view>
				<view class="address">{{shop.address}}</view>
				
			</view>
			<view class="right">
				<view class="distance">距离 {{distance}}km</view>
				<view class="daohang" @tap.stop="daohang(shop.lat,shop.lng)">
					<view class="icon"></view>
					<text>导航</text>
				</view>
			</view>
		</view>
		
		<view class="info">
			<view class="item">
				<view class="title">期望货源</view>
				<view class="value">{{shop.desire}}</view>
			</view>
			<view class="item">
				<view class="title">收购货类</view>
				<view class="value">{{shop.goods_cate}}</view>
			</view>
			<view class="jianjie">
				<view class="title">仓储简介</view>
				<view class="value">{{shop.description}}</view>
			</view>
		</view>
		<!-- 联系报价 -->
		<view class="btn" @tap.stop="callPhone(shop.mobile)">联系报价</view>
	</view>
</template>

<script>
import Map from '@/js_sdk/fx-openMap/openMap.js'
import { mapState } from 'vuex';
export default {
	computed: { ...mapState(['user']) },
	data() {
		return {
			currentSwiper: 0, // 轮播图右下角数字
			id:0,
			shop:{
				name:'',
				address:'',
				mobile:'',
				desire:'',
				goods_cate:'',
				description:'',
				images:[],
				distance:''
			}
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.distance = option.distance;
		this.loadData();
	},
	methods: {
		daohang(lat,lng){
			//既有起点也有终点
			var options = {
			    destination:{  //导航终点点坐标和名称
			        latitude:lat,
			        longitude:lng,
			        name:"终点名称"
			    },
			    mode:"drive", //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike
			    mapId:"map" //map 组件的 id (微信小程序端必传)
			}
			//只有有终点(起点默认为当前位置) 微信小程序使用方式
			// var options = {
			//     destination:{  //导航终点点坐标和名称
			//         latitude:lat,
			//         longitude:lng,
			//         name:"终点名称"
			//     },
			//     mode:"drive", //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike
			//     mapId:"map" //map 组件的 id (微信小程序端必传)
			// }
			Map.routePlan(options,'gcj02')
		},
		callPhone(phoneNumber) {
		    // 判断手机号是否为空
		    if (phoneNumber) {
		        // 调用拨号接口
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 电话号码
					success: function () {
						console.log('拨号成功');
					},
					fail: function (err) {
						console.log('拨号失败：', err);
					}
		        });
		    } else {
		        uni.showToast({
					title: '电话号码不能为空',
					icon: 'none'
		        });
		    }
		},
		async loadData() {
			//加载商品
			await uni.request({
				url: '/wanlshop/Warehouse/detils?id='+this.id,
				method: 'GET',
				success: res => {
					this.shop = res.data
				}
			});
		},
		//轮播图指示器
		swiperChange(e) {
			this.currentSwiper = e.detail.current;
		},
	}
};
</script>

<style lang="scss">
	.btn{
		width: 652rpx;
		height: 88rpx;
		background: linear-gradient( 90deg, #6FD4FF 0%, #36AEFF 53%, #0499FD 100%);
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;;
		position: fixed;
		left: 50%;
		bottom:60rpx;
		transform: translateX(-50%);
	}
	.info{
		background-color: white;
		margin-top: 15rpx;
		min-height: 600rpx;
		padding-bottom: 120rpx;
		.item{
			padding: 30rpx 25rpx;
			border-bottom: 2rpx solid #FAFAFA;
			display: flex;
			justify-content: space-between;
			.title{
				font-size: 28rpx;
			}
			.value{
				font-weight: 500;
				font-size: 28rpx;
			}
		}
		.jianjie{
			
			padding: 30rpx 25rpx;
			.title{
				font-size: 28rpx;
			}
			.value{
				margin-top: 30rpx;
			}
		}
	}
	.topinfo{
		background-color: white;
		padding: 30rpx 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			height: 110rpx;
			    display: flex;
			    flex-direction: column;
			    justify-content: center;
			.title{
				font-weight: 600;
				font-size: 32rpx;
			}
			.address{
				margin-top: 10rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #7E7E7E;
				    
			}
			
		}
		.right{
			height: 110rpx;
			    display: flex;
			    flex-direction: column;
			    justify-content: center;
			    align-items: center;
			.distance{
				font-weight: 400;
				font-size: 24rpx;
			}
			.daohang{
				width: 198rpx;
				height: 60rpx;
				background: #EAF2FF;
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				color: #0499FD;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				margin-top: 10rpx;
				.icon{
					width: 36rpx;
					height: 36rpx;
					background: url(https://dcdn.cxycoder.com/user/daohang.png);
					background-repeat: no-repeat;
					background-size: 100%;
				}
				
			}
		}
	}
	
	.swiper-box {
		position: relative;
		width: 100%;
		height: 80vw;
	}
	
	.swiper-box swiper {
		width: 100%;
		height: 80vw;
	}
	
	.swiper-box swiper swiper-item image {
		width: 100%;
		height: 80vw;
	}
	
	.swiper-box .indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		border-radius: 40upx;
		font-size: 22upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}
	
</style>
